<template>
	<div class="sw_system_container">
		<el-tabs class="custom_top" v-model="activeName">
			<el-tab-pane label="研究领域" name="1"></el-tab-pane>
			<el-tab-pane label="测量技术" name="2"></el-tab-pane>
			<el-tab-pane label="强磁场PI" name="3"></el-tab-pane>
			<el-tab-pane label="联系方式" name="4"></el-tab-pane>
			<el-tab-pane label="实验站配置" name="6"></el-tab-pane>
			<el-tab-pane label="运维工程师" name="7"></el-tab-pane>
		</el-tabs>
		<div class="sw_query_form" v-if="activeName !== '3'">
			<template v-if="$isHasAuth(topButton)">
				<div class="button" v-hasPermi="'acc82d0e7809493c9ca7521734dd277e'">
					<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
				</div>
				<el-form size="small" inline v-hasPermi="'35f8281e429440a09d1a6a59cbfea32c'">
					<el-form-item><el-input v-model="queryData.name" clearable placeholder="请输入标题"></el-input></el-form-item>
					<el-form-item><el-button type="primary" @click="getConfigPageData">查询</el-button></el-form-item>
				</el-form>
			</template>
		</div>
		<component ref="comp" :is="compType" :data="tableData" :type="activeName" @refresh="queryConfigData" v-loading="loading"></component>
		<template v-if="!isPaging">
			<template v-if="dataCount > 0">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryConfigData"></sw-pagination>
			</template>
		</template>
	</div>
</template>

<script>
import outLink from './outLink';
import communal from './communal';
import maintain from './maintain';
import contactUs from './contactUs';
import commonLink from './commonLink';
import measurement from './measurement';
import stationRoom from './stationRoom';
import researchArea from './researchArea';
import { queryConfigPageList } from '@/api/system/tbSysConfig';
import { queryUserRoleByType } from '@/api/system/tbSysUserRole';
export default {
	components: { outLink, communal, contactUs, commonLink, measurement, stationRoom, researchArea, maintain },
	data() {
		return {
			loading: false,
			activeName: '1',
			queryData: { page: 1, limit: 15 },
			dataCount: 0,
			tableData: []
		};
	},
	computed: {
		compType() {
			if (this.activeName === '1') {
				return 'researchArea';
			} else if (this.activeName === '2') {
				return 'measurement';
			} else if (this.activeName === '3') {
				return 'outLink';
			} else if (this.activeName === '4') {
				return 'contactUs';
			} else if (this.activeName === '5') {
				return 'commonLink';
			} else if (this.activeName === '6') {
				return 'stationRoom';
			} else if (this.activeName === '7') {
				return 'maintain';
			} else {
				return 'communal';
			}
		},
		topButton() {
			return ['acc82d0e7809493c9ca7521734dd277e', '35f8281e429440a09d1a6a59cbfea32c'];
		},
		isPaging() {
			return ['1', '6'].some((n) => n === this.activeName);
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.queryData.page = 1;
				this.$set(this.queryData, 'name', '');
				if (val === '1') {
					this.queryData.limit = 99999;
				}
				this.queryConfigData();
			},
			immediate: true
		}
	},
	methods: {
		//获取配置列表数据
		async getConfigPageData() {
			let params = { ...this.queryData, type: this.activeName };
			let result = await queryConfigPageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//查询数据配置列表
		queryConfigData() {
			this.loading = true;
			if (this.activeName === '3') {
				this.getPrincipalData();
			} else {
				this.getConfigPageData();
			}
		},

		//获取PI人员
		async getPrincipalData() {
			let params = { ...this.queryData, type: '3' };
			let result = await queryUserRoleByType(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//打开配置弹窗
		handleOpenDialog() {
			this.$refs['comp'].dataId = '';
			this.$refs['comp'].formDialog = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_system_container::v-deep {
	.custom_top {
		margin: -16px 0 16px -16px;
		.el-tabs__item {
			font-size: 16px;
		}
	}
}
</style>
